<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="170px" label-suffix=":" class="form-class">

            <el-form-item label="订单编号" prop="order_number">
                <el-input v-model="model.order_number" type="text" placeholder="请输入订单号" @change="handleChange2">
                </el-input>
            </el-form-item>
            <el-form-item label="店铺" prop="shop">
                <el-select v-model="model.shop_name" placeholder="请选择店铺" @change="handleChange2">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="退款金额" prop="amount">
                <el-input v-model.trim="model.amount" placeholder="请输入退款金额"></el-input>
                <!-- <el-input-number style="width: 100%;" v-model.trim="model.amount" :step="0.01" placeholder="请输入退款金额" clearable></el-input-number> -->
                <!-- <el-input
                    v-model="model.amount"
                    type="number"
                    style="width: 100%;"
                    :step="0.01"
                    placeholder="请输入退款金额"
                    clearable
                    @input="handleInput"
                ></el-input> -->
            </el-form-item>
            <el-form-item label="币种" prop="currency">
                <el-select v-model="model.currency" placeholder="请选择币种">
                    <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="退款原因" prop="ReasonForRefund">
                    <!-- multiple -->
                    <!-- :multiple-limit="3" -->
                    <el-select 
                            v-model="model.ReasonForRefund"
                            filterable
                            collapse-tags
                            clearable
                            @change="handleChange"
                            placeholder="请选择退款原因">
                        <el-option
                        v-for="item in refunds"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="退款意向" prop="SpecificReasons">
                <el-select v-model="model.SpecificReasons" placeholder="请选择退款意向">
                    <el-option
                    v-for="item in SpecificReasons2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="SupplementarySku == true" label="产品sku" prop="ProductSku">
                <el-select 
                        v-model="model.ProductSku"
                        multiple
                        filterable
                        collapse-tags
                        clearable
                        placeholder="请选择产品sku">
                    <el-option
                    v-for="item in ProductSkus"
                    :key="item.id"
                    :label="item.sku"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="SupplementaryStatus == true" label="补充描述" prop="Supplementary">
                <!-- <el-input v-model.trim="model.Supplementary" placeholder="请添加补充描述"></el-input> -->
                <el-input type="textarea" v-model="model.Supplementary" :rows="2" placeholder="请添加补充描述"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { ReasonForRefund,getProductSkus,CustomerRefunds } from '@/api/orderSource'
import { RegistrationRefund ,RegistrationRefundedit} from '@/api/login'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            SupplementaryStatus: false,
            SupplementarySku: false,
            ProductSkus: [],
            options: [{
                    value: 'SheCurve',
                    label: 'SheCurve'
                }, {
                    value: 'woobilly',
                    label: 'woobilly'
                }, {
                    value: 'LilyLove',
                    label: 'LilyLove'
                }, {
                    value: 'kisslove',
                    label: 'kisslove'
                },
            ],
            options2: [{
                    value: 'USD',
                    label: 'USD'
                },{
                    value: 'CAD',
                    label: 'CAD'
                },{
                    value: 'AUD',
                    label: 'AUD'
                },
            ],
            refunds: [],
            SpecificReasons2: [{
                    value: '有退款意向',
                    label: '有退款意向'
                },{
                    value: '确认退款',
                    label: '确认退款'
                },{
                    value: '产品问题反馈',
                    label: '产品问题反馈'
                },{
                    value: '补发',
                    label: '补发'
                },
            ],
            model: {
                id: '',
                currency: "",
                shop_name: "",
                amount: "",
                order_number: '',
                order_id: '',
                name: '',
                total_price: '',
                payment_gateway_names: '',
            },
            rules: {
            },
            save: false,
        }
    },
    computed: {
        title() {
            return `${this.type == 'edit' ? '编辑' : '新增'}退款明细`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        try {
            const ReasonForRefundData = await ReasonForRefund()
            this.refunds = ReasonForRefundData ?? []
        } catch (error) {

        }
        
    },
    methods: {
    
        handleChange2() {
            this.loading_from = true
            getProductSkus(this.model)
                .then(res => {
                    this.ProductSkus = res.data ?? []
                })
                .finally(() => {
                })
            CustomerRefunds(this.model)
                .then(res => {
                    this.model = res.data ?? []
                    this.handleChange(this.model.ReasonForRefund)
                })
                .finally(() => {
                    this.loading_from = false
                })
        },
        
        handleChange(value) {
            this.SupplementaryStatus = false;
            this.SupplementarySku = false;

            // 新增逻辑：检查 value 数组中是否包含值 14
            if (value == 24) {
                this.SupplementaryStatus = true;
                this.SupplementarySku = true;
            } 

            const specialValuesForSku = [21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44];
            if (specialValuesForSku.includes(value)) {
                this.SupplementarySku = true;
            }
            const specialValuesForStatus = [21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,46,48];
            if (specialValuesForStatus.includes(value)) {
                this.SupplementaryStatus = true;
            }
            
            //查询sku列表
            getProductSkus(this.model)
                .then(res => {
                    this.ProductSkus = res.data ?? []
                })
                .finally(() => {
                })
        },
        getDetail() {
            this.loading = true

            CustomerRefunds(this.params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                    this.handleChange(this.model.ReasonForRefund)
                })
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }
                const params = { ...this.model }
                if (this.save) {
                    return
                }
                this.save = true
                if (this.type === 'edit') {
                    RegistrationRefundedit(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    RegistrationRefund(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.form-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.form-class.el-form .el-form-item .el-input {
    width: 250px;
}
.form-class.el-form .el-form-item .el-textarea {
    width: 770px;
}
.form-class.el-form .el-form-item .el-input-number,
.form-class.el-form .el-form-item .el-input-number .el-input {
    width: 120px;
}
.form-class.el-form .el-form-item .el-input-number + .el-input-number {
    margin-left: 10px;
}
.form-class.el-form .el-form-item.full {
    width: 100%;
}
.upload {
}
.upload-tip span {
    color: #ff4949;
    padding: 0 4px;
}
</style>
